<template>
  <div class="detail section">
    <!-- <div class="pager-title" v-if="!isComponent">{{$route.meta.title}}</div> -->
    <el-button v-if="companyInfo.status_audit === '未完善信息' && !isComponent" v-show="isDisabled" @click="isDisabled = false" type="primary" style="float: right;margin-top: 15px;">修改信息</el-button>
    <!-- <el-alert
      style="margin: 20px 0;"
      :title="companyInfo.status_audit"
      :type="status[statusEnum.indexOf(companyInfo.status_audit)]">
    </el-alert>
    <div v-if="companyInfo.status_audit === '审核驳回'">驳回原因：{{companyInfo.audit_errmsg}}</div> -->
    <el-form :model="companyInfo" :disabled="isDisabled && !isComponent" label-width="400px">
      <div class="h2 line">个人信息 <span class="tips danger-text">请认真填写以下信息 , 否则无法通过实名认证 , 最多只有两次机会!</span></div>
      <el-form-item label="真实姓名：">
        <el-input v-model="companyInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="联系方式：">
        <el-input v-model="companyInfo.phone"></el-input>
      </el-form-item>
      <!-- <el-form-item label="联系地址：">
        <el-input v-model="companyInfo.address"></el-input>
      </el-form-item> -->
      <el-form-item label="身份证号码：">
        <el-input v-model="companyInfo.id_card_number"></el-input>
      </el-form-item>
      <el-form-item v-if="!isComponent" label="身份证人像面：">
        <el-upload
          class="uploader"
          :action="$uploadurl"
          :headers="{ token: userInfo.token }"
          :show-file-list="false"
          :on-success="handleIdCardFrontSuccess"
          :before-upload="beforeUpload">
          <img v-if="companyInfo.id_card_front" @click="viewPic(companyInfo.id_card_front)" :src="companyInfo.id_card_front | checkurl" class="idcard">
          <i v-else class="el-icon-plus idcard"></i>
          <span slot="tip" class="danger-text">（仅支持300KB以内JPG/JEPG/PNG格式图片 要求：画面清晰无遮挡）</span>
        </el-upload>
      </el-form-item>
      <el-form-item v-if="!isComponent" label="身份证国徽面：">
        <el-upload
          class="uploader"
          :action="$uploadurl"
          :headers="{ token: userInfo.token }"
          :show-file-list="false"
          :on-success="handleIdCardReverseSuccess"
          :before-upload="beforeUpload">
          <img v-if="companyInfo.id_card_reverse" @click="viewPic(companyInfo.id_card_reverse)" :src="companyInfo.id_card_reverse | checkurl" class="idcard">
          <i v-else class="el-icon-plus idcard"></i>
        </el-upload>
      </el-form-item>
      <div class="h2 line">账户信息 <span class="tips danger-text">请认真填写以下信息 , 否则无法通过实名认证 , 最多只有两次机会!</span></div>
      <el-form-item label="银行卡号：">
        <el-input v-model="companyInfo.bank_number"></el-input>
      </el-form-item>
      <el-form-item label="开户银行：">
        <el-input v-model="companyInfo.bank_name"></el-input>
      </el-form-item>
      <el-form-item label="开户行地址：">
        <el-input v-model="companyInfo.bank_address"></el-input>
      </el-form-item>
      <el-form-item label="银行预留手机：">
        <el-input v-model="companyInfo.bank_phone"></el-input>
      </el-form-item>
    </el-form>
    <div class="buttons" v-if="isComponent">
      <el-button type="primary" @click="doNext()">下一步</el-button>
    </div>
    <div class="buttons" v-else>
      <el-button type="primary" v-if="['未完善信息', '审核驳回'].includes(companyInfo.status_audit)" v-show="isDisabled" @click="isDisabled = false">修改信息</el-button>
      <el-button type="primary" v-if="['未完善信息', '审核驳回'].includes(companyInfo.status_audit)" v-show="!isDisabled" @click="submit()">保存信息</el-button>
      <el-button type="success" v-if="['未完善信息', '审核驳回'].includes(companyInfo.status_audit) && isDisabled" @click="submitAudit()">提交审核</el-button>
    </div>
    <el-dialog :visible.sync="dialogImageVisible">
      <img width="100%" :src="dialogImageUrl | checkurl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'auth-info',
  props: {
    isComponent: false
  },
  data() {
    return {
      dialogImageVisible: false,
      dialogImageUrl: '',
      isDisabled: true,
      companyInfo: {},
      statusEnum: ['未完善信息', '等待审核', '审核通过', '审核驳回'],
      status: ['info', 'warning', 'success', 'error']
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    viewPic(url) {
      this.dialogImageUrl = url
      this.dialogImageVisible = true
    },
    handleIdCardFrontSuccess(res, file) {
      if (res.status === 1) {
        this.companyInfo.id_card_front = res.data.list.file
      } else {
        this.$message.error(res.message)
      }
    },
    handleIdCardReverseSuccess(res, file) {
      if (res.status === 1) {
        this.companyInfo.id_card_reverse = res.data.list.file
      } else {
        this.$message.error(res.message)
      }
    },
    beforeUpload(file) {
      const isLt300K = file.size / 1024 < 600;

      if (!isLt300K) {
        this.$message.error('上传图片大小不能超过 300KB!');
      }
      return isLt300K;
    },
    getInfo() {
      this.$http.get('/personal/user/info').then(res => {
        if (res.status === 1) {
          let userInfo = res.data
          this.companyInfo = {
            id: userInfo.id,
            name: userInfo.name,
            phone: userInfo.phone,
            address: userInfo.address,
            id_card_number: userInfo.id_card_number,
            id_card_front: userInfo.id_card_front,
            id_card_reverse: userInfo.id_card_reverse,
            bank_name: userInfo.bank_name,
            bank_number: userInfo.bank_number,
            bank_address: userInfo.bank_address,
            bank_phone: userInfo.bank_phone,
            audit_errmsg: userInfo.audit_errmsg,
            status_audit: userInfo.status_audit
          }
        }
      })
    },
    doNext() {
      this.submit()
    },
    submitAudit() {
      this.$confirm('确认提交审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.$http.put('/personal/user/submit').then(res => {
          loading.close()
          if (res.status === 1) {
            this.$message.success('提交成功')
            this.getInfo()
            this.isDisabled = true
          }
        })
      })
    },
    submit() {
      this.$http.post('/personal/user/update', {
        ...this.companyInfo
      }).then(res => {
        if (res.status === 1) {
          if (this.isComponent) {
            let loading = this.$loading({
              lock: true,
              text: '实名认证中...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            this.$http.put('/personal/user/submit').then(res => {
              loading.close()
              if (res.status === 1) {
                this.$emit('next', res)
              }
            })
          } else {
            this.$message.success('保存成功')
            this.getInfo()
            this.isDisabled = true
          }
        }
      })
    }
  },
  mounted() {
    this.getInfo()
  }
}
</script>
<style lang="less" scoped>
.h2 {
  margin-bottom: 20px;
}
.uploader {
  display: inline-block;
  margin-right: 20px;
  vertical-align: top;
}
.uploader .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.uploader .el-upload:hover {
  border-color: #409EFF;
}
.uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 256px;
  line-height: 256px;
  text-align: center;
  border: 2px dashed #eee;
}
.avatar {
  width: 178px;
  height: 256px;
  display: block;
}
.idcard {
  width: 200px;
  height: 125px;
  line-height: 125px;
  font-size: 36px;
  color: #999;
  vertical-align: top;
  &.el-icon-plus {
    border: 2px dashed #eee;
  }
}
/deep/ .el-input.is-disabled .el-input__inner {
  background-color: transparent;
  border-color: transparent;
  cursor: text;
  color: #333;
}
img {
  object-fit: contain;
}
</style>